<template>
  <div class="create-order">
    <h2 class="mb-6">{{ $t('messageboard') }}</h2>
    <v-form ref="form" v-model="form.valid">
      <div class="view">
        <v-row>
          <v-text-field
            v-model="form.mobile"
            dense
            :rules="emailRules"
            :counter="100"
            :label="$t('email')"
            type="email"
            outlined
            maxlength="100"
            persistent-hint
          />
        </v-row>

        <v-row>
          <v-text-field
            v-model="form.user_name"
            dense
            :label="$t('username')"
            outlined
            persistent-hint
          />
        </v-row>

        <v-row>
          <v-textarea
            v-model="form.memo"
            dense
            :label="$t('message')"
            type="textarea"
            outlined
            persistent-hint
            name="input-7-4"
          />
        </v-row>

        <v-row no-gutters align="center" justify="center">
          <v-btn
            class="mt-5"
            elevation="2"
            rounded
            dark
            color="#E22129FF"
            style="text-transform: none"
            :loading="loading"
            @click="submit"
          >
            {{ $t('submit') }}
          </v-btn>
        </v-row>
      </div>
    </v-form>

    <div class="ins">
      <img style="width: 200px; height: 200px" src="~/assets/instagramQr.jpg" alt="instagramQr" />
      <strong>
        <a
          rel="noopener"
          href="https://www.instagram.com/onlyjdm.tokyo?igsh=MWtobGhhcHNjZHFqbQ%3D%3D&amp;utm_source=qr"
          target="_blank"
        >
          ins@ONLYJDM.TOKYO
        </a>
      </strong>
    </div>

    <v-overlay :value="overlay">
      <v-alert
        class="mx-4"
        style="background-color: #ffffff !important"
        dense
        outlined
        prominent
        type="success"
      >
        {{ $t('thanksboard') }}
      </v-alert>
    </v-overlay>
  </div>
</template>

<script>
export default {
  name: 'CreateBoard',
  layout: 'simple',
  data() {
    return {
      form: {
        user_name: '',
        mobile: '',
        memo: ''
      },
      overlay: false,
      mobileRules: [(v) => !!v || 'mobile is required'],
      emailRules: [
        (v) => !!v || this.$t('require'),
        (v) => /.+@.+/.test(v) || this.$t('emialrule')
      ],
      loading: false
    };
  },
  head() {
    return {
      title: this.$t('board.title'),
      meta: [{ hid: 'description', name: 'description', content: this.$t('board.description') }]
    };
  },
  methods: {
    submit() {
      const res = this.$refs.form.validate();
      if (res) {
        this.loading = true;
        this.$api
          .post('/order/preBook', this.form, { getAll: true })
          .then((res) => {
            if (res.code === 1) {
              this.overlay = true;
              this.$refs.form.reset();
              setTimeout(() => {
                this.overlay = false;
              }, 3000);
            }
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.create-order {
  padding: 40px;
}

.loading {
  display: flex;
  align-items: center;
}

.ins {
  margin-top: 20px;
  text-align: center;
  cursor: pointer;
  a {
    color: #000;
    text-decoration: none;
  }
}
</style>
